const vendor = require('./vendor');
const { reactive, computed, watch } = vendor;
const { BaseVmControl, es6 } = require('./control');

exports.BaseVmControl = BaseVmControl;
exports.watch = watch;

// class PageCotnrol extends BaseVmControl {
//     title = ''
//     get TextDetail() {
//         return 'my 页面 ' + this.title
//     }
//     setTitle(v) {
//         this.title = v
//     }
//     action(e) {
//         globalThis.wRoute.back()
//     }
//     action2() {
//         this.title = Nid()
//     }
// }
// es6.injectControl(PageCotnrol, 'my')
// let vm = es6.useControl('my');

// console.log(vm);

/**
 * 
 * @param {{data, methods, onLoad}} option 
 */
exports.createPage = function(option = {}) {
    let methods = option?.methods ?? {}
    delete option.methods;

    if (option.controls) {
        Object.keys(option.controls).forEach(function(key) {
            // console.log('key', key);
            es6.injectControl(option.controls[key], key)
            option['$' + key] =  es6.useControl(key);
        });
        // console.log( Object.keys(option.controls));
    }

    // methods.$test = function() {
    //     let obj = reactive({
    //         some: 1
    //     });
    //     let c1 = computed(() => {
    //         return obj.some
    //     })
        
    //     watch(c1, function(newVal) {
    //         console.log('sssss', newVal);
    //     });
        
    //     setTimeout(() => {
    //         obj.some = 2
    //     }, 3000)
    // }

    Page({
        ...option,
        ...methods
    })
}